<template>
  <div class="wrapper">
    <!-- 1.0滑动插件 -->
    <swiper
      ref="mySwiper"
      :pagination="{ clickable: true }"
      navigation
      :autoplay="{ delay: 2000 }"
      :loop="true"
      @swiper="onSwiper"
      @click="clickHandle"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="(img, index) in imgSrc" :key="index"
        ><img class="swiper-img" :src="img"
      /></swiper-slide>
    </swiper>
  </div>
</template>
<script>
import "swiper/swiper-bundle.min.css";
import "swiper/components/navigation/navigation.min.css";
import "swiper/components/pagination/pagination.min.css";

import { Swiper, SwiperSlide } from "swiper/vue";

import SwiperCore, { Autoplay, Navigation, Pagination } from "swiper";
import axios from 'axios';
SwiperCore.use([Navigation, Autoplay, Pagination]);

export default {
  data() {
    return {
      imgSrc: [],
    };
  },
  props: {
    list: Array,
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  created(){
    axios.get("/api/swiperImgList").then((res)=>{
      this.imgSrc=res.data.data.imgSrc
    })
  },
  methods: {
    onSwiper(swiper) {
      console.log(swiper);
    },
    onSlideChange() {
      console.log("slide change");
    },
    clickHandle() {
      console.log("click");
    },
  },
  mounted() {
    // console.log("Current Swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  },
};
</script>
<style lang="scss" scoped>
/* .wrapper /deep/ .swiper-pagination-bullet-active {
  background-color: #fff !important;
} */
.wrapper {
}
.swiper-img {
  width: 100%;
  height: 90%;
}
</style>
